<template>
  <div class="app-container">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <el-form :model="queryParams" ref="queryRef">
        <el-form-item prop="shareTitle">
          <el-input
            v-model="queryParams.shareTitle"
            placeholder="请输入标题"
            class="search-input"
            clearable
            @keyup.enter="handleQuery"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button
          type="primary"
          class="add-button"
          @click="handleAdd"
          v-hasPermi="['manage:share:add']"
          >发布</el-button
        >
        <el-button type="Refresh" @click="resetQuery">重置</el-button>
      </el-form>
    </div>

    <!-- 卡片列表 -->
    <div class="card-list">
      <el-card
        v-for="item in shareList"
        :key="item.shareId"
        class="share-card"
        shadow="hover"
      >
        <div class="card-content">
          <div
            class="card-image"
            v-if="item.shareFile && item.shareFile.length > 0"
          >
            <el-image :src="item.shareFile[0]" alt="分享图片" fit="cover" />
            <div class="image-overlay" @click="openImageDialog(item)"></div>
          </div>
          <div v-else class="card-image">
            <el-empty
              description="暂无图片"
              :image-size="80"
              @click="openImageDialog(item)"
            ></el-empty>
          </div>
          <div class="card-info">
            <div class="card-title">{{ item.shareTitle }}</div>
            <div class="card-footer">
              <div style="display: flex; align-items: center">
                <el-image
                  v-if="item.avatar"
                  :src="item.avatar"
                  style="
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                  "
                  fit="cover"
                />
                <span style="margin-left: 8px">{{ item.userName }}</span>
              </div>
              <div style="display: flex; align-items: center">
                <Heart
                  style="cursor: pointer"
                  @click="handleLikeClick(item)"
                  v-if="item.shareFlag === 0"
                />
                <FullHeart
                  style="cursor: pointer"
                  :style="{ color: item.shareFlag === 1 ? '#f56c6c' : '' }"
                  @click="handleLikeClick(item)"
                  v-if="item.shareFlag === 1"
                />
                <span style="margin-left: 4px">{{ item.thumbNum || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="shareRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="shareTitle">
          <el-input
            v-model="form.shareTitle"
            placeholder="请输入心得分享标题"
          />
        </el-form-item>
        <el-form-item label="图片" prop="shareFile">
          <image-upload v-model="form.shareFile" />
        </el-form-item>
        <el-form-item label="内容" prop="shareContent">
          <el-input
            type="textarea"
            v-model="form.shareContent"
            :rows="8"
            show-word-limit
            maxlength="1000"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片查看对话框 -->
    <el-dialog
      v-model="imageDialogVisible"
      width="880px"
      class="rounded-dialog"
      :show-close="false"
      style="border-radius: 16px"
    >
      <!-- 添加关闭按钮 -->
      <template #header>
        <div class="mask-close-btn-wrapper">
          <el-button
            circle
            class="mask-close-btn"
            @click="imageDialogVisible = false"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>
      <el-row style="height: 80vh" class="dialog-row">
        <!-- 左侧图片区域 -->
        <el-col :span="12" class="image-col">
          <div class="divider-line"></div>
          <template
            v-if="currentItem.shareFile && currentItem.shareFile.length > 0"
          >
            <el-carousel
              :initial-index="currentImageIndex"
              :autoplay="false"
              :arrow="currentItem.shareFile.length > 1 ? 'always' : 'never'"
              indicator-position="none"
              style="height: 100%; border-radius: 16px 0 0 16px"
            >
              <el-carousel-item
                v-for="(img, index) in currentItem.shareFile"
                :key="index"
                style="height: 100%"
              >
                <img :src="img" class="full-image" />
              </el-carousel-item>
            </el-carousel>
          </template>
          <template v-else>
            <div class="no-image">
              <el-empty
                description="暂无图片"
                :image-size="80"
                style="
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              ></el-empty>
            </div>
          </template>
        </el-col>

        <!-- 右侧内容区域 -->
        <el-col :span="12" class="content-col">
          <div class="content-wrapper">
            <div class="content-header">
              <!-- 用户信息 -->
              <div class="user-info">
                <el-image
                  v-if="currentItem.avatar"
                  :src="currentItem.avatar"
                  style="
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                  "
                  fit="cover"
                />
                <span style="margin-left: 8px">{{ currentItem.userName }}</span>
              </div>
              <!-- 文章标题 -->
              <h3 class="article-title">{{ currentItem.shareTitle }}</h3>
              <!-- 文章内容 -->
              <div class="article-content">
                {{ currentItem.shareContent }}
              </div>
              <!-- 发布日期和IP -->
              <div class="meta-info">
                <span>{{
                  parseTime(currentItem.createTime, "{y}-{m}-{d}")
                }}</span>
                <span style="margin-left: 8px">{{
                  currentItem.createAddr
                }}</span>
              </div>
              <!-- 分割线 -->
              <el-divider />
            </div>

            <!-- 评论区域 -->
            <div
              class="comment-section"
              :style="{ height: commentSectionHeight }"
            >
              <div v-if="commentList.length === 0" class="no-comment">
                快来发布第一条评论吧
              </div>
              <div
                v-for="comment in commentList"
                :key="comment.commentId"
                class="comment-item"
                v-else
              ></div>
              <div
                v-for="comment in commentList"
                :key="comment.commentId"
                class="comment-item"
              >
                <!-- 一级评论 -->
                <div class="comment-main" v-if="commentList.length > 0">
                  <div class="comment-header">
                    <el-image
                      :src="comment.avatar || ''"
                      class="comment-avatar"
                      fit="cover"
                    />
                  </div>
                  <div class="comment-content">
                    <span class="comment-user">{{ comment.userName }}</span>
                    <div class="comment-body">{{ comment.commentBody }}</div>
                    <div class="comment-footer">
                      <span>{{
                        parseTime(comment.createTime, "{y}-{m}-{d}")
                      }}</span>
                      <span style="margin-left: 8px">{{ comment.ipAddr }}</span>
                      <div class="comment-actions">
                        <span
                          class="like-action"
                          @click.stop="handleCommentLike(comment)"
                        >
                          <Heart
                            v-if="comment.likeFlag === 0"
                            class="heart-icon"
                          />
                          <FullHeart
                            v-if="comment.likeFlag === 1"
                            class="heart-icon liked"
                          />
                          <span class="like-count" style="padding-top: 1px">{{
                            comment.likeNum || 0
                          }}</span>
                        </span>
                        <el-button
                          type="text"
                          size="small"
                          @click.stop="handleReply(comment)"
                        >
                          回复
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 二级评论 -->
                <template
                  v-if="
                    comment.commentChildList &&
                    comment.commentChildList.length > 0
                  "
                >
                  <!-- 默认显示第一条二级评论 -->
                  <div class="comment-child">
                    <div class="comment-header">
                      <el-image
                        :src="comment.commentChildList[0].avatar || ''"
                        class="comment-avatar-child"
                        fit="cover"
                      />
                    </div>
                    <div class="comment-content">
                      <span class="comment-user">{{
                        comment.commentChildList[0].userName
                      }}</span>
                      <div class="comment-body">
                        {{
                          comment.commentChildList[0].toUserName
                            ? `回复 ${comment.commentChildList[0].toUserName}：${comment.commentChildList[0].commentBody}`
                            : comment.commentChildList[0].commentBody
                        }}
                      </div>
                      <div class="comment-footer">
                        <span>{{
                          parseTime(
                            comment.commentChildList[0].createTime,
                            "{y}-{m}-{d}"
                          )
                        }}</span>
                        <span style="margin-left: 8px">{{
                          comment.commentChildList[0].ipAddr
                        }}</span>
                        <div class="comment-actions">
                          <span
                            class="like-action"
                            @click.stop="
                              handleCommentLike(comment.commentChildList[0])
                            "
                          >
                            <Heart
                              v-if="comment.commentChildList[0].likeFlag === 0"
                              class="heart-icon"
                            />
                            <FullHeart
                              v-if="comment.commentChildList[0].likeFlag === 1"
                              class="heart-icon liked"
                            />
                            <span class="like-count" style="padding-top: 1px">{{
                              comment.commentChildList[0].likeNum || 0
                            }}</span>
                          </span>
                          <el-button
                            type="text"
                            size="small"
                            @click.stop="
                              handleReply(comment.commentChildList[0])
                            "
                          >
                            回复
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 折叠的其他二级评论 -->
                  <div
                    v-if="
                      comment.commentChildList.length > 1 && !comment.expanded
                    "
                    class="show-more-comments"
                  >
                    <el-button type="text" @click="expandComments(comment)">
                      展开{{ comment.commentChildList.length - 1 }}条回复
                    </el-button>
                  </div>

                  <!-- 展开的其他二级评论 -->
                  <template v-if="comment.expanded">
                    <div
                      v-for="(child, index) in comment.commentChildList"
                      :key="child.commentId"
                      class="comment-child"
                      v-show="index > 0"
                    >
                      <div class="comment-header">
                        <el-image
                          :src="child.avatar || ''"
                          class="comment-avatar-child"
                          fit="cover"
                        />
                      </div>
                      <div class="comment-content">
                        <span class="comment-user">{{ child.userName }}</span>
                        <div class="comment-body">
                          {{
                            child.toUserName
                              ? `回复 ${child.toUserName}：${child.commentBody}`
                              : child.commentBody
                          }}
                        </div>
                        <div class="comment-footer">
                          <span>{{
                            parseTime(child.createTime, "{y}-{m}-{d}")
                          }}</span>
                          <span style="margin-left: 8px">{{
                            child.ipAddr
                          }}</span>
                          <div class="comment-actions">
                            <span
                              class="like-action"
                              @click.stop="handleCommentLike(child)"
                            >
                              <Heart
                                v-if="child.likeFlag === 0"
                                class="heart-icon"
                              />
                              <FullHeart
                                v-if="child.likeFlag === 1"
                                class="heart-icon liked"
                              />
                              <span
                                class="like-count"
                                style="padding-top: 1px"
                                >{{ child.likeNum || 0 }}</span
                              >
                            </span>
                            <el-button
                              type="text"
                              size="small"
                              @click.stop="handleReply(child)"
                            >
                              回复
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </template>
              </div>
            </div>

            <!-- 评论输入区域 -->
            <div
              class="comment-input-area"
              :class="{ expanded: isCommentExpanded }"
            >
              <!-- 新增回复信息展示 -->
              <div v-if="replyTarget" class="reply-info">
                <div class="reply-title">回复 {{ replyTarget.userName }}</div>
                <div class="reply-content">{{ replyTarget.commentBody }}</div>
                <el-icon class="close-reply" @click="cancelReply"
                  ><Close
                /></el-icon>
              </div>

              <div @click="!isCommentExpanded && toggleCommentInput()">
                <el-input
                  v-model="newComment"
                  placeholder="点击输入评论..."
                  readonly
                  v-if="!isCommentExpanded"
                />
                <div v-else class="expanded-input">
                  <el-input
                    v-model="newComment"
                    type="textarea"
                    :rows="4"
                    placeholder="输入评论..."
                    resize="none"
                    @click.stop
                  />
                  <div class="input-actions">
                    <el-button size="small" @click.stop="addComment"
                      >提交</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      @click.stop="cancelReply"
                      >取消</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup name="Share">
import { listShare, getShare, delShare, addShare, updateShare, listComment, insertComment, updateComment } from "@/api/manage/share"
import Heart from '@/components/Heart'
import FullHeart from '@/components/FullHeart'

const { proxy } = getCurrentInstance()

const shareList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    shareTitle: null,
  },
  rules: {
    shareTitle: [
      { required: true, message: "标题不能为空", trigger: "blur" }
    ]
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询发现分享列表 */
function getList () {
  loading.value = true
  listShare(queryParams.value).then(response => {
    shareList.value = response.rows.map(item => {
      if (item.shareFile) {
        try {
          item.shareFile = JSON.parse(item.shareFile)
        } catch (e) {
          item.shareFile = []
        }
      } else {
        item.shareFile = []
      }
      return item
    })
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel () {
  open.value = false
  reset()
}

// 表单重置
function reset () {
  form.value = {
    shareId: null,
    shareTitle: null,
    shareContent: null,
    userId: null,
    createTime: null,
    createAddr: null,
    updateTime: null,
    updateUser: null,
    shareFile: null
  }
  proxy.resetForm("shareRef")
}

/** 搜索按钮操作 */
function handleQuery () {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery () {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.shareId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd () {
  reset()
  open.value = true
  title.value = "添加发现分享"
}

/** 修改按钮操作 */
function handleUpdate (row) {
  reset()
  const _shareId = row.shareId || ids.value
  getShare(_shareId).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改发现分享"
  })
}

const fileUrlList = ref([])

function submitForm () {
  let data = { ...form.value }
  if (form.value.shareFile) {
    fileUrlList.value = form.value.shareFile.split(',').map(url => url.trim())
    data.shareFile = JSON.stringify(fileUrlList.value)
  }
  proxy.$refs["shareRef"].validate(valid => {
    if (valid) {
      if (form.value.shareId != null) {
        updateShare(data).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addShare(data).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete (row) {
  const _shareIds = row.shareId || ids.value
  proxy.$modal.confirm('是否确认删除发现分享编号为"' + _shareIds + '"的数据项？').then(function () {
    return delShare(_shareIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => { })
}

/** 导出按钮操作 */
function handleExport () {
  proxy.download('manage/share/export', {
    ...queryParams.value
  }, `share_${new Date().getTime()}.xlsx`)
}

// 爱心点击事件
function handleLikeClick (item) {
  const data = { ...item }
  data.shareFile = JSON.stringify(data.shareFile)
  if (data.shareFlag === 1) {
    data.thumbNum = item.thumbNum - 1
  } else {
    data.thumbNum = item.thumbNum + 1
  }
  updateShare(data).then(response => {
    getList()
  })
}

const imageDialogVisible = ref(false)
const currentImageIndex = ref(0)
const currentItem = ref({})
const commentList = ref([])
const isCommentExpanded = ref(false)  // 确保已定义
const newComment = ref('')  // 确保已定义
const commentSectionHeight = ref('calc(100% - 60px)')  // 初始高度

// 切换评论输入框展开状态
const toggleCommentInput = () => {
  isCommentExpanded.value = !isCommentExpanded.value
  // 如果需要调整高度
  commentSectionHeight.value = isCommentExpanded.value
    ? 'calc(100% - 200px)'
    : 'calc(100% - 60px)'
  // 关闭时同时清除回复目标
  if (!isCommentExpanded.value) {
    replyTarget.value = null
  }
}

// 添加评论
function addComment () {
  const data = {
    shareId: currentItem.value.shareId,
    commentBody: newComment.value
  }
  // 检查评论内容是否为空
  if (!newComment.value) {
    proxy.$modal.msgError("评论内容不能为空")
    return
  }
  // 获取要插入的评论数据
  const commentData = replyTarget.value
    ? { ...replyTarget.value, commentBody: newComment.value }
    : data
  // 插入评论并处理响应
  insertComment(commentData)
    .then(response => {
      if (response.code === 200) {
        // 清空输入框并刷新评论列表
        newComment.value = ''
        getCommentListByShareId(data.shareId)
        cancelReply()
        proxy.$modal.msgSuccess("评论成功")
      } else {
        proxy.$modal.msgError(response.msg || "评论失败，请稍后重试")
      }
    })
}

function getCommentListByShareId (shareId) {
  listComment(shareId).then(response => {
    // 为每条评论添加expanded属性
    commentList.value = response.data.map(comment => {
      return {
        ...comment,
        expanded: false
      }
    })
  })
}

// 展开评论
function expandComments (comment) {
  comment.expanded = true
}

// 打开图片查看对话框时获取评论
function openImageDialog (item) {
  currentItem.value = item
  currentImageIndex.value = 0
  imageDialogVisible.value = true
  // 重置回复目标状态
  replyTarget.value = null
  // 重置评论输入框状态
  isCommentExpanded.value = false
  newComment.value = ''
  getCommentListByShareId(item.shareId)
}

// 评论点赞
function handleCommentLike (comment) {
  if (comment) {
    const data = { ...comment }
    if (comment.likeFlag === 1) {
      data.likeNum = comment.likeNum - 1
    } else {
      data.likeNum = comment.likeNum + 1
    }

    // 保存当前展开状态
    const expandedStates = commentList.value.map(c => ({
      commentId: c.commentId,
      expanded: c.expanded
    }))

    updateComment(data).then(response => {
      // 重新获取评论列表
      listComment(currentItem.value.shareId).then(response => {
        // 恢复之前的展开状态
        commentList.value = response.data.map(c => {
          const state = expandedStates.find(s => s.commentId === c.commentId)
          return {
            ...c,
            expanded: state ? state.expanded : false
          }
        })
      })
      if (response.code !== 200) {
        proxy.$modal.msgError(response.msg || "点赞失败，请稍后重试")
      }
    })
  }
}

const replyTarget = ref(null) // 存储回复目标

// 回复评论
function handleReply (comment) {
  // replyTarget.value = {
  //   userName: comment.userName,
  //   commentBody: comment.commentBody,
  //   commentId: comment.commentId
  // }
  replyTarget.value = { ...comment }
  isCommentExpanded.value = true
}

// 取消回复
function cancelReply () {
  replyTarget.value = null
  newComment.value = ''
  isCommentExpanded.value = false
}

getList();
</script>

<style lang="scss" scoped>
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .search-input {
    width: 400px;
    margin-right: 10px;
  }

  .add-button {
    margin-left: 10px;
  }
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.share-card {
  overflow: hidden;
  height: 360px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  &:hover {
    box-shadow: none;
  }
}

.card-image {
  height: 280px;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 16px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:has(.el-empty) {
    cursor: pointer;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;

    &:hover {
      background-color: rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
  }
}

.card-info {
  height: 90px;
  padding: 4px 10px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.card-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

:deep(.el-image) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.el-card__body) {
  padding: 0 !important;
  height: 100%;
}

:deep(.el-form) {
  display: flex;
}

/* 圆角对话框 */
.rounded-dialog {
  overflow: hidden;
}

:deep(.el-dialog__header) {
  padding: 0 !important;
}

:deep(.el-dialog__body) {
  padding: 0 !important;
  border-radius: 16px !important;
}

.dialog-row {
  margin: 0;
}

/* 左侧图片区域 */
.image-col {
  position: relative;
  height: 100%;
  padding: 0;

  .divider-line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ebeef5;
    z-index: 1;
  }

  :deep(.el-carousel) {
    height: 100%;

    .el-carousel__container {
      height: 100%;
    }

    .el-carousel__arrow {
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
    }
  }

  .full-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* 右侧内容区域 */
.content-col {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-wrapper {
    position: relative;
    height: 100%;
    padding-bottom: 60px;
  }

  .content-header {
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .article-title {
      font-weight: bold;
      margin: 0 0 12px 0;
    }

    .article-content {
      margin-bottom: 16px;
      line-height: 1.6;
      color: #666;
    }

    .meta-info {
      color: #999;
      font-size: 12px;
      margin-bottom: 16px;
    }

    .el-divider {
      margin: 16px 0;
    }
  }
}

.comment-section {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.comment-item {
  &:last-child {
    margin-bottom: 0;
  }
}

.comment-main {
  // padding: 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  display: flex; // Add flex display
}

.comment-child {
  padding: 10px 10px 10px 24px;
  margin-left: 24px;
  border-radius: 0 8px 8px 0;
  // margin-bottom: 8px;
  display: flex;
  &:last-child {
    margin-bottom: 0;
  }

  .comment-content {
    margin-left: 8px; // 二级评论内容区域左边距小一点
  }
}

.comment-header {
  display: flex;
  flex-direction: column; // Change to column layout
  margin-right: 12px; // Add margin between avatar and content
}

.comment-avatar {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50%;
  margin-right: 0 !important;
  margin-bottom: 4px;
  border: 1px solid #e0e0e0;
}

.comment-avatar-child {
  width: 26px !important; // 二级评论头像小一点
  height: 26px !important; // 二级评论头像小一点
  border-radius: 50%;
  margin-right: 0 !important;
  margin-bottom: 4px;
  border: 1px solid #e0e0e0;
}

.comment-user {
  font-size: 14px;
  font-weight: 500;
  // 移除固定宽度，让用户名自然显示
  text-align: left; // 左对齐
  word-break: break-all;
}

.comment-content {
  flex: 1;
  margin-left: 12px; // 添加左边距，与头像分开
}

.comment-body {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  margin-top: 4px; // 用户名和内容之间添加间距
}

/* 添加/修改CSS样式 */
.comment-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  flex-wrap: wrap;
}

.comment-actions {
  display: flex;
  align-items: center;
  margin-left: 12px;

  .like-action {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 8px;

    &:hover {
      svg {
        filter: drop-shadow(0 0 1px #f56c6c);
      }

      .like-count {
        color: #f56c6c;
      }
    }

    /* 已点赞状态的悬停效果 */
    &.liked:hover {
      svg {
        filter: drop-shadow(0 0 2px #f56c6c);
      }
    }

    svg {
      width: 14px;
      height: 14px;
      margin-right: 2px;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.1);
      }
    }

    .like-count {
      margin-left: 4px;
      font-size: 12px;
      transition: color 0.3s ease;
    }
  }

  .el-button {
    padding: 0;
    font-size: 12px;
    height: auto;
    color: #666;

    &:hover {
      color: #409eff;
    }
  }
}

/* 为所有爱心图标添加统一效果 */
.heart-icon {
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }
}

.liked {
  color: #f56c6c;
}

/* 二级评论的样式调整 */
.comment-child {
  .comment-footer {
    padding-top: 2px;
  }

  .comment-actions {
    margin-left: 8px;
  }
}

/* 内容区域包裹层 */
.content-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.show-more-comments {
  margin-left: 64px; // 与二级评论对齐
  padding-top: 0;
  padding-bottom: 8px;

  .el-button {
    padding: 0;
    font-size: 12px;
    color: #666;

    &:hover {
      color: #409eff;
    }
  }
}

/* 评论输入区域 */
.comment-input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: white;
  border-top: 1px solid #ebeef5;
  transition: all 0.3s ease;
  z-index: 10;

  &:not(.expanded) {
    height: 60px;
    cursor: pointer;

    :deep(.el-input__inner) {
      cursor: pointer;
    }
  }

  &.expanded {
    height: 200px;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);

    .expanded-input {
      height: 100%;
      display: flex;
      flex-direction: column;

      :deep(.el-textarea__inner) {
        flex: 1;
        margin-bottom: 8px;
      }
    }
  }
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.reply-info {
  position: relative;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-left: 3px solid #409eff;

  .reply-title {
    font-size: 13px;
    color: #409eff;
    font-weight: 500;
  }

  .reply-content {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .close-reply {
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    color: #999;
    font-size: 14px;

    &:hover {
      color: #666;
    }
  }
}

// 修改关闭按钮样式
.mask-close-btn-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2001; // 确保在遮罩层上方

  .mask-close-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #666;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    &:hover {
      background: rgba(255, 255, 255, 1);
      color: #333;
    }
  }
}

.no-image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 16px 0 0 16px;
}

.no-comment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  padding: 20px;
  text-align: center;
}
</style>